<template>
	<view class="demo-swiper">
		<cl-card>
			<view class="cl-swiper--card">
				<swiper previous-margin="80rpx" next-margin="80rpx" circular indicator-dots autoplay @change="onChangeCard">
					<swiper-item v-for="(item, index) in pictures" :key="index">
						<!-- <view :class="['cl-swiper-item', { active: index === active.card }]">{{
							item
						}}</view> -->
						<view :class="['cl-swiper-item', { active: index === active.card }]">
							<!-- <image src="/static/img/index/index_image01.png"></image> -->
							<image :src="'https://guanli.rgzx.site/assets/uploadimage/'+item.pcPicture"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</cl-card>
	</view>
</template>

<script>
	import {
		getPCPictures
	} from '@/api/index/service.js';
	export default {
		data() {
			return {
				active: {
					card: 0,
					chain: 0,
				},
				// list: [1, 2, 3, 4],
				pictures: []
			};
		},
		created() {
			this.loadPc()
		},
		computed: {
			chainPreviousMargin() {
				switch (this.active.chain) {
					case 0:
						return '20rpx';
					case 3:
						return '120rpx';
					default:
						return '70rpx';
				}
			},
			chainNextMargin() {
				switch (this.active.chain) {
					case 0:
						return '120rpx';
					case 3:
						return '20rpx';
					default:
						return '70rpx';
				}
			}
		},
		methods: {
			loadPc() {
				getPCPictures()
					.then(res => {
						this.pictures = res.data.data;
						console.log(this.pictures);

					}).catch(res => {
						this.pictures = res.data;
						console.log(res);
					})
			},
			onChangeCard(e) {
				this.active.card = e.detail.current;
			},
			onChangeChain(e) {
				this.active.chain = e.detail.current;
			}
		}
	};
</script>

<style>
	.demo-swiper {}
</style>
